<template>
   <div class="header-bar">
   		<h1 class="title">
   			<router-link :to="{ name: 'HomeView'}">豆瓣</router-link>
   		</h1>
   		<ul class="nav">
   			<li>
   				<router-link :to="{ name: 'MovieView' }" style="color: red">电影</router-link>
   			</li>
   			<li>
   				<router-link :to="{ name: 'BookView' }" style="color: purple">图书</router-link>
   			</li>
   			<li>
   				<router-link :to="{ name: 'StatusView' }" style="color: hotpink">广播</router-link>
   			</li>
   			<li>
   				<router-link :to="{ name: 'GroupView' }" style="color: deepblue">小组</router-link>
   			</li>
   		</ul>
   		<span class="talion" @click="showTalion"></span>
   </div>
</template>

<script>
   export default {
   	   name: 'header-bar',
		methods: {
			// 触发父亲的 showTalion 
			showTalion: function(){
				this.$emit('showTalion');
			}
		}
 }
</script>

<style lang="scss" scoped>
	.header-bar {
		.title{
			flex: 1;
			max-width: 4.6rem;
			max-height: 2.2rem;
			margin-right: 1.8rem;
			font-size: 0;
			line-height: 3.2rem;
			color: #00b600;
			word-break: break-all;			// 允许换行
			background: url() no-repeat;
			// background-image: url('../assets/douban.png');
    		background-size: cover;
			a{
				display: block;
			}
		}
		 ul {
			display: flex;
			flex: 1;
			justify-content: flex-end;
		}
		li {
			display: inline-block;
			font-size: 1.6rem;
			margin-right: 1.2rem;
		}
		.talion{
			background-size: cover;
			width: 2.4rem;
			height: 1.8rem;
			margin-top: 0.4rem;
			background: url() no-repeat;
			background-size: cover;
		}
	}
</style>
